/**
 * Toast 消息组件
 * 作者: 陈祖豪
 * 邮箱: 3469807212@qq.com
 * 开发时间: 2024年11月30日
 * 
 * 调用方法:
 * 
 * // 创建 Toast 实例
 * const toast = new Toast();
 * 
 * // 显示消息
 * toast.show('这是一条消息');
 * 
 * // 使用不同类型
 * toast.success('操作成功！');
 * toast.error('出错了！');
 * toast.warning('警告信息');
 * toast.info('提示信息');
 * 
 * // 自定义配置
 * toast.show('自定义消息', {
 *     type: 'success',
 *     duration: 5000,
 *     icon: 'ri-custom-icon'
 * });
 */

class Toast {
    constructor() {
        this.createToastContainer();
    }

    createToastContainer() {
        if (!document.querySelector('.toast-container')) {
            const container = document.createElement('div');
            container.className = 'toast-container';
            document.body.appendChild(container);
        }
    }

    /**
     * 显示 Toast 消息
     * @param {string} message - 要显示的消息
     * @param {Object} options - 配置选项
     * @param {string} options.type - Toast 类型 ('success' | 'error' | 'warning' | 'info')
     * @param {number} options.duration - 显示持续时间（毫秒）
     * @param {string} options.icon - 自定义图标类名（基于 Remix Icon）
     */
    show(message, options = {}) {
        const {
            type = 'info',
            duration = 3000,
            icon = this.getDefaultIcon(type)
        } = options;

        // 创建 Toast 元素
        const toast = document.createElement('div');
        toast.className = `toast toast-${type}`;
        
        // 设置 Toast 内容
        toast.innerHTML = `
            <i class="${icon}"></i>
            <span>${message}</span>
        `;

        // 添加到容器
        const container = document.querySelector('.toast-container');
        container.appendChild(toast);

        // 触发重排以启动动画
        void toast.offsetWidth;
        toast.classList.add('show');

        // 设置自动移除
        setTimeout(() => {
            toast.classList.remove('show');
            setTimeout(() => {
                container.removeChild(toast);
            }, 300);
        }, duration);
    }

    /**
     * 获取默认图标
     * @param {string} type - Toast 类型
     * @returns {string} 图标类名
     */
    getDefaultIcon(type) {
        const icons = {
            success: 'ri-check-line',
            error: 'ri-error-warning-line',
            warning: 'ri-alert-line',
            info: 'ri-information-line'
        };
        return icons[type] || icons.info;
    }

    // 便捷方法
    success(message, options = {}) {
        this.show(message, { ...options, type: 'success' });
    }

    error(message, options = {}) {
        this.show(message, { ...options, type: 'error' });
    }

    warning(message, options = {}) {
        this.show(message, { ...options, type: 'warning' });
    }

    info(message, options = {}) {
        this.show(message, { ...options, type: 'info' });
    }
}

// 导出 Toast 类
export default Toast;